{include file="public/header"}
</head>
<style>
    .uploadDemolist {
        margin-top: 20px;
    }

    .uploadDemolist li {
        width: 100px;
        /* line-height: 100px; */
        text-align: center;
        float: left;
        margin-right: 10px;
        overflow: hidden;
        margin-bottom: 10px;
    }

    .uploadDemolist li span {
        font-size: 25px;
        position: absolute;
        right: 0;
        bottom: -50px;
        color: #009688;
    }

    .uploadDemolist li .img {
        width: 100px;
        height: 100px;
        line-height: 100px;
        position: relative;
    }

    .uploadDemolist li .img img {
        max-width: 100%;
        max-height: 100%;
    }

    .uploadDemolist li p {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin: 0 auto;
    }

    .uploadDemolist .del {
        background-color: rgba(0, 0, 0, 0.4);
        position: absolute;
        text-align: right;
        width: 100px;
        height: 25px;
        line-height: 25px;
        top: -25px;
    }

    .uploadDemolist .del i {
        font-size: 20px;
        color: #fff;
        margin-right: 10px;
    }

    .uploadDemolist li:hover>.img .del {
        top: 0;
    }

    .select li span {
        display: none;
    }

    .success span {
        display: block !important;
    }
</style>

<body>
    <div class="cBody">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">本地上传</li>
                <li>在线管理</li>
                <li>文件搜索</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-hide" id="uploadDemoView">
                        <button type="button" class="layui-btn" id="files-all">确定使用</button>
                        <ul class="uploadlist uploadDemolist">

                        </ul>
                    </div>
                    <div class="layui-upload-drag" id="test10" style="width: 500px;height: 250px;">
                        <i class="layui-icon"></i>
                        <p>点击上传，或将文件拖拽到此处</p>
                        <p>最多可选{$num}个</p>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <button type="button" class="layui-btn" id="files-one">确定使用</button>
                    <ul class="uploadDemolist select">
                        {volist name="filelist" id="v"}
                        {if $v['type']=="jpg"||$v['type']=="png"||$v['type']=="gif"}
                        <li class="">
                            <div class="img">
                                <div class="del">
                                    <a href="javascript:;" data-path="/static/files/{$v.path}">
                                        <i class="layui-icon layui-icon-delete"></i>
                                    </a>
                                </div>
                                <img lay-src="__FILES__{$v.path}" />
                                <span class="layui-icon layui-icon-ok-circle"></span>
                            </div>
                            <p class="data-file">{$v.path}</p>
                        </li>
                        {elseif $v['type']=="mp4"||$v['type']=="AVI"||$v['type']=="rmvb"/}
                        <li>
                            <div class="img">
                                <div class="del">
                                    <a href="javascript:;" data-path="/static/files/{$v.path}">
                                        <i class="layui-icon layui-icon-delete"></i>
                                    </a>
                                </div>
                                <img lay-src="__ADMIN__images/videos.png" />
                                <span class="layui-icon layui-icon-ok-circle"></span>
                            </div>
                            <p class="data-file">{$v.path}</p>
                        </li>
                        {else}
                        <li>
                            <div class="img">
                                <div class="del">
                                    <a href="javascript:;" data-path="/static/files/{$v.path}">
                                        <i class="layui-icon layui-icon-delete"></i>
                                    </a>
                                </div>
                                <img lay-src="__ADMIN__images/files.png" />
                                <span class="layui-icon layui-icon-ok-circle"></span>
                            </div>
                            <p class="data-file">{$v.path}</p>
                        </li>
                        {/if}
                        {/volist}
                    </ul>
                </div>
                <div class="layui-tab-item">暂未开发</div>
            </div>
        </div>

        <script>
            //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
            layui.use(['element', 'upload', 'jquery', 'layer', 'flow'], function () {
                var element = layui.element;
                var $ = layui.jquery
                    , upload = layui.upload;
                var layer = layui.layer;
                var flow = layui.flow;
                //当你执行这样一个方法时，即对页面中的全部带有lay-src的img元素开启了懒加载（当然你也可以指定相关img）
                flow.lazyimg();
                //拖拽上传
                upload.render({
                    elem: '#test10'
                    , url: '{:url("Login/uploads")}' //改成您自己的上传接口
                    , method: "post"
                    , field: 'file[]' //文件域字段
                    , multiple: true //允许多文件上传
                    , number: '{$num}'//可上传文件数量
                    , accept: 'file'
                    , size: 20480  //最大上传大小KB
                    , done: function (res) {
                        // layer.msg('上传成功');
                        console.log(res);
                        if (res.code == 0) {
                            layui.$('#uploadDemoView').removeClass('layui-hide');
                            layui.$('#test10').hide();
                            var src = "/static/" + res.data.src;
                            if (res.data.type == "jpg" || res.data.type == "png" || res.data.type == "gif") {
                                $('.uploadDemolist').append('<li><div class="img"><div class="del"><a href="javascript:;" data-path="' + src + '"><i class="layui-icon layui-icon-delete"></i></a></div><img src="' + src + '" /><span class="layui-icon layui-icon-ok-circle"></span></div><p class="data-file">' + src + '</p></li>');
                            } else if (res.data.type == "mp4" || res.data.type == "AVI" || res.data.type == "rmvb") {
                                $('.uploadDemolist').append('<li><div class="img"><div class="del"><a href="javascript:;" data-path="' + src + '"><i class="layui-icon layui-icon-delete"></i></a></div><img src=""__ADMIN__images/videos.png" /><span class="layui-icon layui-icon-ok-circle"></span></div><p class="data-file">' + src + '</p></li>');
                            } else {
                                $('.uploadDemolist').append('<li><div class="img"><div class="del"><a href="javascript:;" data-path="' + src + '"><i class="layui-icon layui-icon-delete"></i></a></div><img src=""__ADMIN__images/files.png" /><span class="layui-icon layui-icon-ok-circle"></span></div><p class="data-file">' + src + '</p></li>');
                            }
                        } else {
                            layer.msg(res.msg, {
                                icon: 2
                            });
                        }
                    }
                });
            });
        </script>
        <script>
            //文件删除
            $('body').delegate('.del a', 'click', function () {
                var path = $(this).attr('data-path');
                var then = $(this);
                layui.use('layer', function () {
                    var layer = layui.layer;
                    layer.confirm('确定删除吗？', function (index) {
                        $.ajax({
                            url: '{:url("Login/filedel")}',
                            type: 'POST',
                            data: { 'path': path },
                            dataType: 'json',
                            success: function (res) {
                                console.log(res);
                                if (res.code == 0) {
                                    $(then).parent().parent().parent().remove();
                                    if ($(".uploadlist").children("li").length <= 0) {
                                        layui.$('#uploadDemoView').addClass('layui-hide');
                                        layui.$('#test10').show();
                                    }
                                    layer.close(index);
                                } else {
                                    layer.msg(res.msg, {
                                        icon: 2
                                    });
                                }
                            }, error: function () {
                                layer.msg('网络出错，请联系客服！', {
                                    icon: 0
                                });
                            }
                        });
                    });
                });
            });
            //选择文件
            $('body').delegate('.select li', 'click', function () {
                $('.select li').removeClass('success');
                $(this).addClass('success');
            });
            //提交文件
            $('body').delegate('#files-one', 'click', function () {
                var inputs = window.parent.$('.{$id}').attr('value');
                if ($('.success').length <= 0) {
                    alert('请选择文件');
                } else {
                    var html = $('.success p').html();
                    // $(window.parent.$('#ico').val(name));
                    var tag = window.parent.$('.{$id}').prop('nodeName');
                    // alert(tag);
                    if ('{$num}' == '1') {
                        $(window.parent.$('.{$id}').val("/static/files/" + html));
                        $(window.parent.$('#{$id}').attr("src", "/static/files/" + html));
                        //layui获取当前的窗口名
                        var index = parent.layer.getFrameIndex(window.name);
                        //关闭当前窗口
                        parent.layer.close(index);
                    } else {
                        // console.log(inputs); return false;
                        var arr = inputs.split(',');
                        arr.push('/static/files' + '/' + html + '');
                        //.substr(1)
                        $(window.parent.$('.{$id}').val(arr.toString().substr(0)));
                        $(window.parent.$('#{$id}').append('<div class="img-card"><div class="bgc-img"><a href="javascript:;" class="iconfont icon-shanchu"></a></div><img class="layui-upload-img" src="/static/files' + '/' + html + '"></div>'));
                        //layui获取当前的窗口名
                        var index = parent.layer.getFrameIndex(window.name);
                        //关闭当前窗口
                        parent.layer.close(index);
                    }
                }
            });
            //提交文件文件
            $('body').delegate('#files-all', 'click', function () {
                var html = '';
                var inputcon = [];
                if ('{$num}' != '1') {
                    $('.uploadlist li p').each(function (i, v) {

                        html = html + '<div class="img-card"><div class="bgc-img"><a href="javascript:;" class="iconfont icon-shanchu"></a></div><img class="layui-upload-img" src="' + $(v).html() + '"></div>';
                        // console.log();
                        inputcon.push($(v).html());
                    });
                    // console.log(html); return false;
                } else {
                    html = $('.uploadlist li p').html();
                }
                // $(window.parent.$('#ico').val(name));
                var tag = window.parent.$('.{$id}').prop('nodeName');
                // alert(tag);

                if ('{$num}' == '1') {
                    $(window.parent.$('.{$id}').val(html));
                    $(window.parent.$('#{$id}').attr("src", html));
                    //layui获取当前的窗口名
                    var index = parent.layer.getFrameIndex(window.name);
                    //关闭当前窗口
                    parent.layer.close(index);
                } else {
                    var arr = window.parent.$('.{$id}').val();
                    if (arr != '') {
                        $(window.parent.$('.{$id}').val(arr + ',' + inputcon.toString()));
                    } else {
                        $(window.parent.$('.{$id}').val(inputcon.toString()));
                    }
                    $(window.parent.$('#{$id}').append(html));

                    //layui获取当前的窗口名
                    var index = parent.layer.getFrameIndex(window.name);
                    //关闭当前窗口
                    parent.layer.close(index);
                }
            });
        </script>
    </div>
</body>
{include file="public/footer"}